<template>
    <div class="header">
        <div class="logo">
            <a href="">
<!--                <img src="../../assets/logo.png" height="26"/>-->
                <span class="logo-text" v-show="!$store.state.isCollapse">善达信息语音识别软件V1.0</span>
            </a>
            <i class="btn-collapse" :class="activeClass" @click="handleCollapse"></i>
        </div>

        <div class="nav-right">
            <el-dropdown>
                <span class="el-dropdown-link">
                    欢迎回来，admin
<!--                    <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                </span>
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item>个人信息</el-dropdown-item>-->
<!--                    <el-dropdown-item>修改密码</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
            </el-dropdown>
            <span class="logout" @click="logout">退出</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {}
        },
        computed: {
            activeClass() {
                let isCollapse = this.$store.state.isCollapse;
                return isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold';
            }
        },
        methods: {
            handleCollapse() {
                this.$store.commit('toggleCollapse');
            },
            logout() {
                sessionStorage.removeItem('token');
                this.$router.replace({path: '/'});
            }
        }
    }
</script>